<script setup>
import LetterMinBox from '../components/LetterMinBox.vue'
import publicsend from '@/assets/letter/publicsend.png'
import onsend from '@/assets/letter/onsend.png'
import savesend from '@/assets/letter/savesend.png'
import nosend from '@/assets/letter/nosend.png'
import wmlogo from '@/assets/wmcode.png'
import letter from '@/assets/letter/letter.png'
import letterNopush from '@/assets/letter/letter-nopush.png'
import { BellFilled, Lock } from '@element-plus/icons-vue'
import {
  disableBlackTheme,
  formatDateTime,
  getTextByHtml,
  daysDifferenceFromNow
} from '../utils/tool'
import {
  letterGetSentInfoService,
  letterGetWaitingSendInfoService,
  letterGetSentAndPubInfoService,
  letterGetCountOnCurUserService
} from '@/api/letter'
import { ref } from 'vue'
import { aesDecrypt } from '@/utils/crypto'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'

disableBlackTheme()
const publicLetter = ref([])

const pushLetter = ref([])

const waitingLetter = ref([])

// 获取发送成功的数据
const getSentData = async () => {
  const res = await letterGetSentInfoService()
  for (let item of res.data.data) {
    item.title = aesDecrypt(item.title)
    item.contentText = getTextByHtml(aesDecrypt(item.content))
    item.sendTime = formatDateTime(item.sendTime)
    item.to = '/letter/showcur?id=' + item.id
  }
  pushLetter.value = res.data.data
}
// 获取待发送的数据
const getWaitingSendData = async () => {
  const res = await letterGetWaitingSendInfoService()
  for (let item of res.data.data) {
    item.title = aesDecrypt(item.title)
    item.sendTimeOriginal = item.sendTime
    item.sendTime = formatDateTime(item.sendTime)
  }
  waitingLetter.value = res.data.data
}
// 获取公开信
const getPubData = async () => {
  const res = await letterGetSentAndPubInfoService()
  for (let item of res.data.data) {
    item.title = aesDecrypt(item.title)
    item.to = '/letter/showpub?id=' + item.id

    let str = getTextByHtml(aesDecrypt(item.content))
    if (str.length > 50) {
      str = str.slice(0, 50)
      str = str + '...'
    }
    item.contentText = str
    item.sendTime = formatDateTime(item.sendTime).split(' ')[0]
  }
  publicLetter.value = res.data.data
}
getSentData()
getWaitingSendData()
getPubData()

// 获取当前登录的用户的一些信息
const count = ref({
  sentCount: 0,
  waitCount: 0,
  saveCount: 0,
  pubCount: 0
})
const getCountOnCurUser = async () => {
  const res = await letterGetCountOnCurUserService()
  count.value = res.data.data
}
getCountOnCurUser()

// 通过仓库拿到当前用户的一些信息
const userStore = useUserStore()

// 跳转路由
const router = useRouter()
const to = (path) => {
  router.push(path)
}
</script>
<template>
  <div style="display: flex; justify-content: space-between">
    <!-- 展示用户名 -->
    <div style="font-size: 16px; color: #409eff">
      Welcome back, {{ userStore.userInfo.nickName }} 👋
    </div>
    <div style="display: flex; align-items: center">
      <a-popover position="bottom">
        <el-icon size="18"><BellFilled /></el-icon>
        <template #content>
          <a-empty description="暂无消息" style="width: 200px" />
        </template>
      </a-popover>
      <div style="width: 10px"></div>
      <!-- 展示用户头像 -->
      <img
        :src="userStore.userInfo.userImg"
        style="
          width: 28px;
          height: 28px;
          border-radius: 50%;
          border: 1px solid #ccc;
        "
        alt=""
      />
      <!-- 展示邮箱 -->
      <span style="padding-left: 10px; font-size: 13px; font-weight: 600">{{
        userStore.userInfo.email
      }}</span>
    </div>
  </div>
  <h2>个人中心</h2>
  <div class="top-box">
    <div class="left">
      <!-- 这里写已发出的信件 -->
      <div style="padding: 10px">
        <div
          style="
            display: flex;
            justify-content: space-between;
            padding-bottom: 10px;
            padding-top: 5px;
            padding-left: 12px;
          "
        >
          <div style="font-weight: 700">已发出信件：</div>
          <el-link
            href="/letter/user/list"
            style="font-size: 11px; color: #409eff"
            >查看更多></el-link
          >
        </div>
        <el-scrollbar height="95px" v-if="pushLetter.length > 0">
          <!-- 列表项 -->
          <a
            :href="item.to"
            target="_blank"
            v-for="item in pushLetter"
            :key="item"
            style="
              padding: 10px;
              margin: 0 12px;
              margin-bottom: 10px;
              display: block;
              background-image: linear-gradient(
                120deg,
                rgb(252, 252, 253) 0%,
                rgb(242, 242, 240) 100%
              );
              border: 1px solid rgba(0, 0, 0, 0.1);
              border-radius: 15px;
              cursor: pointer;
              color: black;
              text-decoration: none;
            "
          >
            <!-- 上部分 -->
            <div style="display: flex; align-items: center">
              <!-- 小图片 -->
              <img
                :src="letter"
                alt=""
                style="
                  width: 50px;
                  height: 50px;
                  padding-right: 10px;
                  transform: translateY(5px);
                "
              />
              <!-- 已发送 -->
              <div style="width: 100%" class="waiting">
                <div
                  style="text-align: right; font-size: 11px; font-weight: 700"
                >
                  To: {{ item.toEmail }}
                </div>
                <!-- 标题和正文 -->
                <div style="width: 100%">
                  <div
                    style="
                      font-weight: 700;
                      padding-bottom: 5px;
                      font-size: 20px;
                      width: 160px;
                    "
                  >
                    {{ item.title }}
                  </div>
                  <div style="font-size: 11px; font-weight: 500; width: 320px">
                    {{ item.contentText }}
                  </div>
                </div>
              </div>
            </div>
            <!-- 下部分 -->
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-top: 3px;
              "
            >
              <div style="font-size: 11px; font-weight: 700; padding-top: 5px">
                发出时间：{{ item.sendTime }}
              </div>
              <div
                style="
                  text-align: right;
                  font-weight: 700;
                  font-size: 11px;
                  padding-top: 5px;
                  width: 170px;
                "
              >
                写信人：{{ item.username }}
              </div>
            </div>
          </a>
        </el-scrollbar>
        <div v-else>
          <a-empty />
        </div>
      </div>
    </div>
    <div class="right">
      <!-- 这里写最近要发出的信件 -->
      <div style="padding: 10px">
        <!-- 头 -->
        <div
          style="
            display: flex;
            justify-content: space-between;
            padding-bottom: 10px;
            padding-top: 5px;
            padding-left: 12px;
          "
        >
          <div style="font-weight: 700">即将发出的信件：</div>
          <el-link
            href="/letter/user/list"
            style="font-size: 11px; color: #409eff"
            >查看更多></el-link
          >
        </div>
        <el-scrollbar height="95px" v-if="waitingLetter.length > 0">
          <div
            v-for="item in waitingLetter"
            :key="item"
            style="
              display: flex;
              align-items: center;
              border-radius: 15px;
              padding: 10px;
              margin: 0 12px;
              margin-bottom: 10px;
              background-image: linear-gradient(
                -135deg,
                #fdfcfb 0%,
                rgb(242, 242, 240) 100%
              );
              border: 1px solid rgba(0, 0, 0, 0.1);
              position: relative;
            "
          >
            <div
              style="
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: rgba(255, 255, 255, 0.9);
                left: 0;
                z-index: 1;
                border-radius: 15px;
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <div style="text-align: center">
                <div>
                  <el-icon size="40" color="#aaa"><Lock /></el-icon>
                </div>
                <span
                  style="font-size: 12px; color: #666"
                  v-if="
                    Number(daysDifferenceFromNow(item.sendTimeOriginal)) > 0
                  "
                >
                  {{
                    Number(daysDifferenceFromNow(item.sendTimeOriginal))
                  }}天后发出</span
                >

                <span v-else style="font-size: 12px; color: #666">
                  即将发出</span
                >
              </div>
            </div>
            <!-- 小图片 -->
            <img
              :src="letterNopush"
              alt=""
              style="
                width: 50px;
                height: 50px;
                padding-right: 10px;
                transform: translateY(-4px);
              "
            />
            <!-- 待发送 -->
            <div style="width: 100%" class="waiting">
              <div style="text-align: right; font-size: 11px; font-weight: 700">
                To: {{ item.toEmail }}
              </div>
              <div>
                <div
                  style="
                    font-weight: 700;
                    padding-bottom: 5px;
                    font-size: 20px;
                    width: 160px;
                  "
                >
                  {{ item.title }}
                </div>
                <div style="font-size: 11px; font-weight: 600">
                  发出日期：{{ item.sendTime }}
                </div>
              </div>
              <div style="display: flex; justify-content: right">
                <div
                  style="
                    text-align: right;
                    font-weight: 700;
                    font-size: 13px;
                    padding-top: 5px;
                    width: 170px;
                  "
                >
                  写信人：{{ item.username }}
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
        <div v-else>
          <a-empty />
        </div>
      </div>
    </div>
  </div>
  <div class="bottom-box">
    <div class="left">
      <div style="padding: 10px">
        <div
          style="
            padding-left: 12px;
            padding-top: 5px;
            display: flex;
            justify-content: space-between;
          "
        >
          <div style="font-weight: 700">平台公开信推荐:</div>
          <el-link
            href="/letter/user/list"
            style="font-size: 11px; color: #409eff"
            >查看更多></el-link
          >
        </div>

        <el-table :data="publicLetter" style="width: 100%">
          <el-table-column prop="sendTime" label="寄信日期" width="140px" />
          <el-table-column prop="title" label="标题" show-overflow-tooltip />
          <el-table-column
            prop="contentText"
            label="信件内容"
            show-overflow-tooltip
          />
          <!-- 选项 -->
          <el-table-column label="选项" width="60px">
            <template #default="{ row }">
              <a
                :href="row.to"
                style="text-decoration: none; color: #409eff"
                target="_blank"
                >浏览</a
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="right">
      <div class="tag">
        <letter-min-box
          title="已寄出"
          :content="count.sentCount + '封'"
          class="minbox"
          :img="onsend"
          @click="to('/letter/user/list')"
        >
        </letter-min-box>
        <letter-min-box
          title="待寄出"
          :content="count.waitCount + '封'"
          class="minbox"
          :img="nosend"
          @click="to('/letter/user/list')"
        >
        </letter-min-box>
      </div>
      <div class="tag last">
        <letter-min-box
          title="暂存箱"
          :content="count.saveCount + '封'"
          class="minbox"
          :img="savesend"
          @click="to('/letter/user/save')"
        >
        </letter-min-box>
        <letter-min-box
          title="公开信"
          :content="count.pubCount + '封'"
          class="minbox"
          :img="publicsend"
          @click="to('/letter/user/save')"
        >
        </letter-min-box>
      </div>
      <div class="plu">
        <div class="plu-left">
          <img :src="wmlogo" alt="" />
        </div>
        <div class="plu-right">
          <div>
            给未来写封信，不止是信，更是时间的礼物！
            <br />
            <br />
            快来给未来的你写一封信吧！
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.top-box {
  display: flex;
  justify-content: space-between;
  height: 148px;
  .left,
  .right {
    width: 49%;
    background-image: linear-gradient(120deg, #eef0f4 0%, #eef0f4 100%);

    // background-image: linear-gradient(120deg, #f1f4f6 0%, #eceef3 100%);
    border-radius: 20px;
    // box-shadow: 3px 3px 6px rgba($color: #000000, $alpha: 0.1);
    background-color: #fef5ed;
  }
}

.bottom-box {
  margin-top: 2%;
  display: flex;
  justify-content: space-between;
  .left,
  .right {
    width: 49%;
  }

  .left {
    border-radius: 20px;
    // box-shadow: 3px 3px 6px rgba($color: #000000, $alpha: 0.1);
    // background-color: rgba($color: #d8dbdb, $alpha: 0.2);
    background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
  }

  .right {
    .tag {
      display: flex;
      justify-content: space-between;
      .minbox {
        width: 49%;
        border-radius: 20px;
        height: 100px;
        // background-color: rgba($color: #d8dbdb, $alpha: 0.2);
        // box-shadow: 3px 3px 6px rgba($color: #000000, $alpha: 0.1);
        // background-image: linear-gradient(120deg, #f7f8f8 0%, #e9eaea 100%);
        // background-image: linear-gradient(120deg, #d4f1d7 0%, #ddf3db 100%);
        background-image: linear-gradient(120deg, #eef1f5 0%, #e6e9f0 100%);
        cursor: pointer;
      }
      ::v-deep .minbox:hover .minbox-letter-content {
        transform: scale(1.1, 1.1);
      }
    }
    .last {
      margin-top: 2%;
    }
  }

  .plu {
    display: flex;
    border-radius: 20px;
    margin-top: 2%;
    align-items: center;
    padding: 16px;
    // background-color: rgba($color: #d8dbdb, $alpha: 0.2);
    // background-image: linear-gradient(120deg, #c8daf7 0%, #c2e9fb 100%);
    background-image: linear-gradient(120deg, #eef1f5 0%, #e6e9f0 100%);
    .plu-left {
      width: 20%;
      img {
        width: 70px;
        height: 70px;
        border-radius: 20%;
      }
    }
    .plu-right {
      width: 80%;
    }
  }
}

::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

::v-deep .el-table tr {
  background-color: transparent !important;
}

::v-deep .el-table th {
  background-color: transparent !important;
}
::v-deep.el-table tbody tr:hover > td {
  background-color: unset !important; //修改成自己想要的颜色即可
}

::v-deep .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}

::v-deep .el-table__row > td {
  border: none;
}

::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: 1px solid #dadada !important;
}
::v-deep .el-table td.el-table__cell {
  border-bottom: 1px solid #dadada !important;
}
/* 清除底部横线 */
/* 去掉table 最底部的线 */
::v-deep .el-table__inner-wrapper::before {
  //去掉最下面的那一条线
  height: 0px;
}

.waiting * {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 溢出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
</style>
